<template>
    <div>
      <section id="package" class="packageList">
        <div class="container">
          <div class="section-header">
            <h2 class="wow fadeInDown animated">商城</h2>
            <p class="wow fadeInDown animated">您可以在这里购买您需要的健身产品哦！</p>
          </div>
          <div class="row">
            <div @click="queryBrand(brand)" class="col-md-3" v-for="(brand, index) in brandInnerObj" :key="index">
              <div class="package wow fadeInLeft animated" data-wow-offset="250" data-wow-delay="200ms">
                <h5 >{{brand.showField}}</h5>
              </div><!-- end package -->
            </div>
          </div>
          <div class="row">
            <div class="col-md-6" v-for="(product, index) in productList" :key="index" @click="handleBuy(product)">
              <div class="package wow fadeInLeft animated" data-wow-offset="250" data-wow-delay="200ms">
                <h5>{{product.name}}</h5>
                <ul class="list-default">
                  <li>品牌：{{product.brandName}}</li>
                  <li>详情：{{product.remark}}</li>
                  <li>剩余：{{product.stock}}</li>
                </ul>
                <strong class="price"><small>$</small>{{product.worth}}</strong>
              </div><!-- end package -->
            </div><!-- end col-md-6 -->
          </div><!-- end row -->
        </div>
      </section>

      <!-- 添加或修改物品列表对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <div class="row">
          <div class="col-md-6">
            <div style="height: 350px" class="package wow fadeInLeft animated" data-wow-offset="250" data-wow-delay="200ms">
              <div style="width: 500px; height: 200px"></div>
              <img style="width: 200px; height: 200px; border-radius: 20px; text-align: center; vertical-align: middle; position: absolute; left: calc(50% - 100px); top: 10px" :src="prepareProductImgUrl" alt="">
              <h5 style="text-align: center" >{{prepareProduct != null? prepareProduct.name: ''}}</h5>
              <ul class="list-default">
                <li>品牌：{{prepareProduct != null? prepareProduct.brandName: ''}}</li>
                <li>详情：{{prepareProduct != null? prepareProduct.remark: ''}}</li>
                <li>剩余：{{prepareProduct != null? prepareProduct.stock: ''}}</li>
              </ul>
            </div><!-- end package -->
          </div>
          <div class="col-md-6">
            <div style="height: 350px; padding-top: 200px" class="package wow fadeInLeft animated" data-wow-offset="250" data-wow-delay="200ms">
              <strong class="price">价格： <small>$</small>{{prepareProduct != null? prepareProduct.worth: ''}}</strong>
              <el-form ref="form" :model="buyForm" :rules="rules" label-width="80px">
                <el-form-item label="购买数" prop="buyNum">
                  <el-input-number v-model="buyForm.buyNum" :min="0" :max="prepareProduct != null? prepareProduct.stock: 0" placeholder="请输入购买数"></el-input-number>
                </el-form-item>
              </el-form>
              <div style="text-align: center">
                <el-button @click="addShoppingCar" type="primary" plain>加入购物车</el-button>
                <el-button @click="buyProduct" type="success" plain>购买</el-button>
              </div>
            </div><!-- end package -->
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>

  import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/business/api/product";
  import {addUser_product} from '@/business/api/user_product'
  import { addCar } from '@/business/api/car'
  import {queryBrandInnerObj} from '@/business/api/brand'
  import {queryOssById} from '@/api/system/oss'

  export default {
    name: 'index',
    data: function() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          brandId: null
        },
        // 产品列表
        productList: [],
        // 准备要购买的产品
        prepareProduct: null,
        // 选中的产品的图片地址
        prepareProductImgUrl: null,
        // 查询的总数
        total: 0,
        // 当前是否正在加载
        loading: false,
        // 牌子的内部对象
        brandInnerObj: null,
        // 是否要显示出购买的弹出层
        open: false,
        // 弹出层的标题
        title: '',
        // 购买数
        buyForm: {
          // 购买数量
          buyNum: 0,
          // 用户id
          userId: null,
          // 产品id
          productId: null,
          // 购买金额
          amount: null
        },
        shoppingCarForm: {
          // 选择的数量
          num: null,
          productId: null,
          userId: null,
          // 价值
          worth: null,
          // 新增购物车日期
          addTime: null,
          // 购买日期
          buyTime: null
        },
        rules: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询物品列表列表 */
      getList() {
        this.loading = true;
        listProduct(this.queryParams).then(response => {
          this.productList = response.rows;
          this.total = response.total;
          this.loading = false;
        });

        if (this.brandInnerObj == null) {
          // 当没有内部对象的时候才查询
          queryBrandInnerObj().then(response => {
            if (response.code === 200) {
              this.brandInnerObj = response.data
            }
          })
        }

      },
      queryBrand(brand) {
        this.queryParams.brandId = brand.refField;
        this.getList()
      },
      /** 打开购买的弹出层 **/
      handleBuy(product) {
        // 打开购买的界面
        this.prepareProduct = product
        this.title = '购买'
        this.open = true
        this.buyForm = this.resetForm()
        // 转换图片信息
        queryOssById(this.prepareProduct.imgUrl).then(response => {
          if (response.code === 200) {
            this.prepareProductImgUrl = response.data.url
          }
        })
      },
      resetForm() {
        return {
          // 购买数量
          buyNum: 0,
          // 用户id
          userId: null,
          // 产品id
          productId: null,
          // 购买金额
          amount: null
        }
      },
      // 购买当下选中的产品
      buyProduct() {
        if (this.buyForm.buyNum === 0) {
          this.$message.warning('请先选择购买数量');
          return;
        }
        this.buyForm.productId = this.prepareProduct.id
        addUser_product(this.buyForm).then(response => {
          if (response.code === 200) {
            this.$message.success('购买成功')
          }
        })
        this.open = false
        this.getList();
      },
      // 加入购物车
      addShoppingCar() {
        if (this.buyForm.buyNum === 0) {
          this.$message.warning('请先选择购买数量');
          return;
        }
        this.shoppingCarForm.productId = this.prepareProduct.id;
        this.shoppingCarForm.num = this.buyForm.buyNum;
        addCar(this.shoppingCarForm).then(response => {
          if (response.code === 200) {
            this.$message.success('新增购物车成功')
          }
        })
        this.open = false;
        this.getList();
      }
    }
  }
</script>

<style scoped src="../../../../assets/css/main.css">

</style>
